<template>
    <div class="container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="线索分析" name="first">线索</el-tab-pane>
            <el-tab-pane label="商机分析" name="second">商机</el-tab-pane>
            <el-tab-pane label="活动分析" name="third">
                <div class="third">
                    <div class="search">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="创建时间">
                                <el-date-picker v-model="value2" type="daterange" start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">搜索</el-button>
                                <el-button type="primary">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="echart_box1">

                    </div>
                    <div class="third_box2">

                    </div>
                    <div class="third_box3">
                        <el-table :data="third_box3_data" style="width: 100%">
                            <el-table-column prop="name" label="活动名称" width="180" />
                            <el-table-column prop="count" label="线索数量" width="180" />
                            <el-table-column prop="available" label="线索有效率" />
                        </el-table>
                    </div>
                </div>

            </el-tab-pane>
            <el-tab-pane label="渠道分析" name="fourth">
                <div class="fourth">
                    <div class="search">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="创建时间">
                                <el-date-picker v-model="value2" type="daterange" start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">搜索</el-button>
                                <el-button type="primary">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="fourth_box1">

                    </div>
                    <div class="fourth_box2">

                    </div>
                    <div class="third_box3">
                        <el-table :data="third_box3_data" style="width: 100%">
                            <el-table-column prop="name" label="活动名称" width="180" />
                            <el-table-column prop="count" label="线索数量" width="180" />
                            <el-table-column prop="available" label="线索有效率" />
                        </el-table>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { nextTick, ref, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import * as echarts from 'echarts';
import { apiThird } from "./index"
/* 标签选择 */
const activeName = ref('third')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
/* 搜索 */
const formInline = reactive({
    user: '',
    region: '',
    date: '',
})
const onSubmit = () => {
    console.log('submit!')
}
//日期选择
const value2 = ref('')
/* 图表 */
const echart_box1_data = ref([])
const third_box2_data = ref({
    xData: [],
    yData: []
})
const third_box3_data = ref([])

const getThirdData = () => {
    let data = {
        pageNum: 1,
        pageSize: 10
    }
    apiThird(data).then((res) => {
        console.log(res, 'res')
        for (let i = 0; i < res.data.length; i++) {
            let obj = {
                value: res.data[i].count,
                name: res.data[i].name
            }
            echart_box1_data.value.push(obj)
            third_box2_data.value.yData.push(res.data[i].available)
            third_box2_data.value.xData.push(res.data[i].name)
            third_box3_data.value.push(res.data[i])
        }
        echart_box1()
        third_box2()
    })


}
const echart_box1 = () => {
    nextTick(() => {
        let chartDom = document.querySelector('.container .third .echart_box1');
        let chartDom2 = document.querySelector('.container .fourth .fourth_box1');
        let myChart = echarts.init(chartDom);
        let myChart2 = echarts.init(chartDom2);
        let option;

        option = {
            title: {
                text: '活动总数分析',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: echart_box1_data.value,
                    //  [
                    //     { value: 1048, name: 'Search Engine' },
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: 300, name: 'Video Ads' }
                    // ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
        option && myChart2.setOption(option);
    })

}
const third_box2 = () => {
    nextTick(() => {
        let chartDom = document.querySelector('.container .third .third_box2');
        let chartDom2 = document.querySelector('.container .fourth .fourth_box2');
        let myChart = echarts.init(chartDom);
        let myChart2 = echarts.init(chartDom2);
        let option;

        option = {
            title: {
                text: '活动有效率分析'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',

                data: third_box2_data.value.xData
                // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: third_box2_data.value.yData,
                    // [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
        option && myChart2.setOption(option);
    })
}
getThirdData()



</script>

<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.container {
    padding: 10px;

    .third {
        .echart_box1 {
            width: 100%;
            height: 500px;
        }

        .third_box2 {
            width: 100%;
            height: 500px;
        }
    }
    .fourth{
        .fourth_box1 {
            width: 100%;
            height: 500px;
        }
        .fourth_box2{
            width: 100%;
            height: 500px;
        }
    }
}
</style>